<template>
	<view class="">
		<view class="app">
			<view class="cell row b-b">
				<text class="tit">联系人</text>
				<input class="input" type="text" maxlength="10" v-model="address.name" placeholder="请输入联系人姓名" placeholder-class="placeholder" />
			</view>
			<view class="cell row b-b">
				<text class="tit">联系电话</text>
				<input class="input" type="number" maxlength="11" v-model="address.phone" placeholder="请输入联系电话" placeholder-class="placeholder" />
			</view>
			<view class="cell row  fill b-b" @tap="visibleCity = true">
				<text class="tit">收货地址</text>
				<text class="input clamp placeholder" v-if="address.province==''">请选择</text>
				<text class="input clamp" v-else>{{ address.province}}-{{address.city}}-{{address.county}}</text>
				<text class="mix-icon icon-you"></text>
			</view>

			<view class="cell row b-b">
				<text class="tit">门牌地址</text>
				<input class="input" type="text" maxlength="50" v-model="address.detail" placeholder="街道、楼牌等" placeholder-class="placeholder" />
			</view>
			<view class="cell row">
				<text class="tit fill">设为默认地址</text>
				<switch :checked="address.isDefault == 1" style="transform: scale(.7);" color="#2781A7" @change="onSwitchChange" />
			</view>
			<view class="footer-btn" style="margin-top: 100upx;">
				<view class="btn one" @tap="submit">保存地址</view>
				<view class="btn two" style="margin-top: 40upx;" @tap="showTips" v-if="address.id">删除地址</view>
			</view>
		</view>
		<mix-loading v-if="isLoading" :mask="true"></mix-loading>
		<u-picker mode="region" :params="params" v-model="visibleCity" @confirm="onConfirm" confirm-color="#2781A7"></u-picker>
		<mix-modal ref="mixModal" text="确定删除这个地址吗?" title="温馨提示" @onConfirm="delAddress"></mix-modal>
	</view>
</template>

<script>
import { checkStr } from '@/common/js/util';
export default {
	data() {
		return {
			id: '',
			visibleCity: false,
			url:"address/add",
			params: {
				province: true,
				city: true,
				area: true
			},
			address: {
				uid:uni.getStorageSync('uid'),
				name:"",
				phone:"",
				province:"",
				city:"",
				county:"",
				detail:"",
				isDefault:"0"
			}
		};
	},
	onLoad(options) {
		if(options.id){
			this.address=JSON.parse(options.item);
			this.url="address/edit";
		}
	},
	methods: {
		onConfirm(e) {
			this.address.province = e.province.label;
			this.address.city = e.city.label;
			this.address.county = e.area.label;
		},
		submit() {
			this.$util.throttle(async () => {
				const {name,phone,province,detail,id} = this.address;
				if (!name) {
					this.$util.msg('请输入联系人姓名');
					return;
				}
				if (!phone) {
					this.$util.msg('请输入联系人姓名');
					return;
				}
				
				if (!checkStr(phone, 'mobile')) {
					this.$util.msg('请输入正确的手机号码');
					return;
				}
				if (!detail) {
					this.$util.msg('请输入您的详细地址');
					return;
				}
				const res = await this.$request(this.url, this.address, { showLoading: true });
				if (res.result == 0) {
					id?this.$util.msg('修改成功!'):this.$util.msg('添加成功!');
					uni.$emit('change_address',{id,type:"edit"});
					this.back();
				}else{
					this.$util.msg(res.resultNote);
				}
			});
		},
		onSwitchChange(e) {
			e.detail.value ? this.address.isDefault = 1 : this.address.isDefault = 0;
		},
		showTips(){
			this.$refs.mixModal.open();
		},
		async delAddress() {
			const res = await this.$request("address/del", {id: this.address.id}, {showLoading: true});
			if (res.result == 0) {
				this.$util.msg("删除成功!");
				uni.$emit('change_address', {id:this.id,type:"del"});
				this.back();
			}else{
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.textarea {
	width: 100%;
	height: 228upx;
	background: #f6f6f6;
	padding: 20upx;
}
.btn {
	width: 700upx;
	line-height: 79upx;
	text-align: center;

	font-size: 30upx;
	border-radius: 39upx;
}
.one {
	background: #2781a7;
	color: #ffffff;
}
.two {
	border: 1px solid #fe2525;
	color: #fe2525;
}

.app {
	padding: 10rpx 20rpx 0;
}

.tit {
	min-width: 150rpx;
	font-size: 26rpx;
	color: #666666;
	line-height: 100upx;
}

.cell {
	height: 100upx;

	.input {
		flex: 1;
		font-size: 26upx;
		color: #333;
	}

	.icon-you {
		flex-shrink: 0;
		margin-right: 8rpx;
		margin-left: 40rpx;
		font-size: 24rpx;
		color: #aaa;
	}
}
</style>
